<template>
    <div class="container">
      <div class="container--item__tel">
        <input type="tel" placeholder="请输入手机号码"
               @keydown="tellShow"
               @focus="tellFocusShow"
               @blur="tellVanish"
               v-model="tell" id="tel">
        <img src="../assets/register/error.png"
             class="container--img__error"
             @click="tellClick"
             v-show="tellDltBoole" alt="#">
      </div>
      <div class="container--item__tel">
        <input type="tel" placeholder="请输入短信验证码" v-model="code" id="code">
        <span class="container--text__code"
              v-if="getCodeBoole" @click="obtainCode">{{counter}}</span>
        <span class="container--text__code"
              v-if="!getCodeBoole">{{counter}}</span>
      </div>
      <div class="container--item__tel">
        <input type="password" placeholder="请输入6~12位密码"
               @keydown="passwordShow"
               @focus="passwordFocusShow"
               @blur="passwordVanish"
               v-model="password" id="password">
        <img src="../assets/register/error.png"
             class="container--img__error"
             @click="pasClick"
             v-show="passwordDltBoole" alt="#">
      </div>
      <div class="container--item__pact">
        <img :src="imgUrl"
             class="container--img__consent"
             @click="consent"
             alt="#">
        <span class="container--item__contract">
          我已阅读并同意
          <a href="" class="container--item__text">《商城销售合同》</a>
        </span>
      </div>
      <div class="container--item__btn" @click="reg">
        注册
      </div>
    </div>
</template>

<script>
import { Throttle } from '../publicFunction';

export default {
  name: 'register',
  data() {
    return {
      tell: '',
      code: '',
      password: '',
      time: null,
      num: 59,
      counter: '获取验证码',
      tellDltBoole: false,
      passwordDltBoole: false,
      getCodeBoole: true,
      /* eslint-disable*/
      imgUrl: require('../assets/register/consent.png'),
      imgUrlBoole: true,
    };
  },
  methods: {
    tellShow() {
      this.tellDltBoole = true;
    },
    passwordShow() {
      this.passwordDltBoole = true;
    },
    tellFocusShow() {
      this.tell.length > 0 ? this.tellDltBoole = true : '';
    },
    passwordFocusShow() {
      this.password.length > 0 ? this.passwordDltBoole = true : '';
    },
    tellVanish() {
      this.tellDltBoole = false;
    },
    passwordVanish() {
      this.passwordDltBoole = false;
    },
    tellClick() {
      this.tell = '';
    },
    pasClick() {
      this.password = '';
    },
    consent() {
      this.imgUrlBoole = !this.imgUrlBoole;
      if (this.imgUrl === require('../assets/register/consent.png')) {
        this.imgUrl = require('../assets/register/consent2.png');
      } else {
        this.imgUrl = require('../assets/register/consent.png');
      }
    },
    obtainCode() {
      if (this.tell && /^1[35789]\d{9}$/.test(this.tell)) {
        this.$api.getCode({ tell: this.tell })
          .then((data) => {
            console.log(data.data);
            if (data.data.code === 1002) {
              this.getCodeBoole = !this.getCodeBoole;
              this.$popUp({
                message: data.data.msg,
              });
              this.num = 59;
             this.time = setInterval(() => {
                this.counter = `等待${this.num}s`;
                if (this.num === 0) {
                  this.getCodeBoole = !this.getCodeBoole;
                  this.counter = '重新获取';
                  clearInterval(this.time);
                } else {
                  this.num --;
                }
              },1000);
            } else {
              this.$popUp({
                message: data.data.msg,
              });
            }
          })
          .catch((error) => {
            console.log(error);
          });
      } else {
        this.$popUp({
          message: '请填写正确的手机号',
        });
      }

    },
    reg: Throttle(function () {
      if (this.password && this.code) {
        if (!this.getCodeBoole) {
          if (this.imgUrlBoole) {
            this.$api.register({
              phoneNumber: this.tell,
              validCode: this.code,
              password: this.password
            })
              .then((data) => {
                console.log(data);
                if (data.data.code === 2001) {
                  this.$bus.$emit('authLogin');
                  this.$popUp({
                    message: '注册成功！',
                  });
                } else {
                  this.$popUp({
                    message: data.data.msg,
                  });
                }
              })
              .catch((error) => {
                console.log(error);
                this.$popUp({
                  message: '注册失败！',
                });
              });
          } else {
            this.$popUp({
              message: '请阅读并勾选商城销售合同',
            });
          }
        } else {
          this.$popUp({
            message: '请先发送验证码'
          })
        }
      } else {
        this.$popUp({
          message: '请完善信息'
        })
      }
    },500)
  },
};
</script>

<style scoped lang="scss">
*{
  margin: 0;
  padding: 0;
  font-size: 0;
}
.container{
  position: relative;
  .container--item__tel{
    position: relative;
    left: 8%;
    right: 8%;
    height: 1.3333333rem;
    width: 84%;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    .container--img__error{
      width: .4rem;
      height: .4rem;
      position: absolute;
      right: .613333333rem;
      top: .46666665rem;
    }
    #tel,#code,#password{
      margin-left: .45333333rem;
      outline:none;
      border-width:0;
      height: 95%;
      font-size: .34666666rem;
      width: 60%;
    }
    .container--text__code{
      font-size: .4rem;
      color: #609aeb;
      display: block;
      position: absolute;
      right: .24rem;
      top: .4rem;
    }
  }
  .container--item__pact{
    padding-top: .506rem;
    padding-left: 8%;
    .container--img__consent{
      width: .4266666rem;
      height: .4266666rem;
      vertical-align: middle;
    }
    .container--item__contract{
      position: relative;
      font-size: .29rem;
      vertical-align: middle;
      padding-left: .4rem;
      .container--item__text{
        font-size: .29rem;
        color: #339cef;
        text-decoration: none;
      }
    }
  }
  .container--item__btn{
    position: absolute;
    left: 1.28rem;
    right: 1.28rem;
    top: 6rem;
    line-height: 1.066666rem;
    text-align: center;
    border-radius: 30px;
    background-color: #3c9dfc;
    color: #fff;
    font-size: .4266666rem;
  }
  .container--item__btn:active{
    background-color: #338fe3;
  }
}

</style>
